<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
	pageEncoding="UTF-8"%>
	
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
	media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
</head>

<body>
<div class="layuimini-container">
	<div class="layuimini-main">

			<fieldset class="table-search-fieldset">
				<legend>统计条件</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="">
					
						<div class="layui-form-item">
    					<div class="layui-input-inline">
     						 <button class="layui-btn" id="demo1">
  									按照
  								<i class="layui-icon layui-icon-down layui-font-12"></i>
							</button>
      					</div>
      					
      					<div>
      					<label  id="label" class="layui-form-label"></label>
      					</div>
      					
      					<div class="layui-input-inline" id="test">
									<input id="date" type="text" name="date" autocomplete="off"
										class="layui-input"  placeholder="点击选择时间范围">
						</div>
      					
      					<div class="layui-inline">
								<button id="serachBtn" type="button"
									class="layui-btn layui-btn-primary" lay-submit
									lay-filter="data-search-btn">
									<i class="layui-icon"></i> 搜 索
								</button>
						</div>
    					
  						</div>  
							
					</form>
				</div>
			</fieldset>



			<table class="layui-hide" id="currentTableId"
				lay-filter="currentTableFilter">
			</table>
	
	</div>
</div>

	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table', 'layer', 'laydate','dropdown' ], function() {
			var $ = layui.jquery, form = layui.form, table = layui.table;
			layer = layui.layer;
			laydate = layui.laydate;
			var dropdown = layui.dropdown;
			

			

			  $("#serachBtn").on("click", function() {
				  //渲染下拉框
				  dropdown.render({
					    elem: '#demo1', //可绑定在任意元素中，此处以上述按钮为例
					    data: [{
					      title: '年查询',
					      id: 1
					      
					    },{
					      title: '月查询',
					      id: 2
					      
					    },{
					        title: '日查询',
					        id: 3
					      }],
					    
					      click: function(data, othis){
					    	  $("#date").remove();
					    	  $("#test").append('<input id="date" type="text" name="date" autocomplete="off" class="layui-input"  placeholder="点击选择时间范围">');
					    	  if(data.id===1){
					    		  $("#label").html(data.title)
					    		  laydate.render({ 
					    			  elem: '#date'
					    			  ,type: 'year'
					    			  ,range: '~'
					    			});
					    	  } if(data.id===2){
					    		  $("#label").html(data.title)
					    		  laydate.render({ 
					    			  elem: '#date'
					    			  ,type: 'month'
					    			  ,range: '~'
					    			});
					    	  } if(data.id===3){
					    		  $("#label").html(data.title)
					    		  laydate.render({ 
					    		    elem: '#date'
					    		    ,range: '~' //range:true，则默认分隔符号为-
					    		  });
					    	  }
					    	}
					      
					  });
				  
				table.render({
					elem : '#currentTableId',
					url : '/countcontroller?action=list',//请求放在表格中的数据
							
					where:{
						storedate:$("#date").val()
					},
					
					toolbar : '#toolbarDemo',
					defaultToolbar : [ 'filter', 'exports', 'print', {
						title : '提示',
						layEvent : 'LAYTABLE_TIPS',
						icon : 'layui-icon-tips'
					} ],
					cols : [ [ {
						type : "checkbox",
						
					},{
						field : 'waresName',
						//width : 80,
						title : '商品名称',
						sort : true
					},{
						field : 'status',
						//width : 80,
						title : '出/入库状态',
						sort : true
					},
					{
						field : 'num',
						//width : 80,
						title : '数量',
						sort : true
					} 
					 ] ],
					limits : [ 5,10,15 ],
					limit : 15,
					page : true,
					skin : 'line'
				});
				
			}).click();

		});
	</script>

</body>
</html>